import { useEffect, useRef, useState } from "react";
import HomePage_TableComponent from "../../../../component/table"
import { $Http } from "../../../../../../network";
import { $EventBus_off, $EventBus_on } from "../../../../../../common/utils";
import { Divider, message } from "antd";
import HomePage_ModalComponent from "../../../../component/modal";
import HomePage_ModalComponent_ConfirmationModallComponent from "../../../../component/modal/component/confirmationModal";
import HomePage_SystemSettingsPage_ReviewWorkOrderPage_ModalComponnet from "./component/modal";

// 主页-系统设置页面-审核工单页面
const HomePage_SystemSettingsPage_ReviewWorkOrderPage = () => {
    const paramsData = useRef<object>({ processResult: 0 })
    let [pageNo, setPageNo] = useState<number>(1)
    let [pageSize, setPageSize] = useState<number>(10)
    const [sourceData, setSourceData] = useState<object>({})
    const [switchIdx, setSwitchIdx] = useState<number>(0)
    const [isModal, setIsModal] = useState<boolean>(false)
    const [isDeleteModal, setIsDeleteModal] = useState<boolean>(false)
    const [modalData, setModalData] = useState<object>({})

    const columnList = [
        {
            title: '序号',
            width: 60,
            render: (text: string, record: object, idx: number) => idx + 1,
        },
        {
            title: '提交时间',
            minWidth: 85,
            dataIndex: 'subTime',
            render: (text: string) => text ?? "-"
        },
        {
            title: '提交账号',
            minWidth: 85,
            dataIndex: 'subName',
            render: (text: string) => text ?? "-"
        },
        {
            title: '操作类型',
            minWidth: 85,
            render: (text: string, record: object, idx: number) => <span>{record["opeName"]}/{record["opeType"]}</span>,
        },

    ];
    const reviewWorkOrderColumnList = [{
        title: '操作详情',
        minWidth: 85,
        render: (text: string, record: object, idx: number) => <span className="homePage-tableOperationBtn" onClick={() => click_see(record)}>查看</span>,
        align: "center"
    },
    {
        title: '操作',
        align: "right",
        width: 120,
        fixed: "right",
        render: (text: string, record: object, idx: number) => <>
            <span className="homePage-tableOperationBtn" style={{ color: "#2BA471" }} onClick={() => click_review("通过", record, "#2BA471")}>通过</span>
            <Divider className="homePage-tableOperationDivider" type="vertical" />
            <span className="homePage-tableOperationBtn" style={{ color: "#D54941" }} onClick={() => click_review("不通过", record, "#D54941")}>不通过</span>
        </>
    },]

    const historyColumnList = [
        {
            title: '处理结果',
            minWidth: 85,
            dataIndex: 'processResult',
        },
    ]

    const click_see = (data: object) => {
        setModalData(data)
        setIsModal(true)
    }
    const click_review = (value: string, data: object, color: string) => {
        setIsDeleteModal(true)
        setModalData({ result: value, ...data, color })
    }
    const http_search = () => {
        $Http("search", { typeName: "系统设置/审核工单", alterID: sessionStorage.userID, ...paramsData.current, pageNo, pageSize }).then((res) => {
            setSourceData({ ...res["data"] })
        })
    }

    const change_pagination = (no: number, size: number) => {
        pageNo = no
        pageSize = size
        setPageNo(pageNo)
        setPageSize(pageSize)
        http_search()
    }
    const change_modalCancel = (value) => {
        value && change_pagination(1, pageSize)
        setIsModal(false)
    }

    // 广播函数数据
    const eventBusFuncData = {
        // 头部操作查询
        switchIdx: (data: object) => {
            setSwitchIdx(data["data"]["switchIdx"])
            paramsData.current["processResult"] = data["data"]["switchIdx"]
            pageNo = 1
            http_search()
            setPageNo(pageNo)
        },

        // 确认操作
        confirmOperation: (data: object) => {
            $Http("review", { id: data["data"]["id"], result: data["data"]["result"], alterID: sessionStorage.userID }).then((res) => {
                message.success(res["success"])
                change_pagination(1, pageSize)
                setIsDeleteModal(false)
            })
        },

    }
    useEffect(() => {
        $EventBus_on(eventBusFuncData)
        http_search()
        return () => {
            $EventBus_off(eventBusFuncData)
        }
    }, [])
    return (
        <>
            <HomePage_TableComponent name="homePageSystemSettingsReviewWorkOrderPageTable" columnList={[...columnList, ...(switchIdx ? historyColumnList : reviewWorkOrderColumnList)]} pageNo={pageNo} pageSize={pageSize} alignCenterList={["操作详情"]}
                alignRightList={["操作"]} sourceData={sourceData} change_pagination={change_pagination} />
            {
                isModal && <HomePage_ModalComponent width={640} change_cancel={setIsModal} contentComponent={<HomePage_SystemSettingsPage_ReviewWorkOrderPage_ModalComponnet isReview sourceData={modalData} change_cancel={change_modalCancel} />} />
            }
            {
                isDeleteModal && <HomePage_ModalComponent width={500} change_cancel={setIsDeleteModal} contentComponent={<HomePage_ModalComponent_ConfirmationModallComponent title={`${modalData["result"]} ${modalData["opeName"]}/${modalData["opeType"]}`} content={`确认${modalData["result"]} “${modalData["opeName"]}/${modalData["opeType"]}” 吗？`} operation={modalData["result"]} operationBgc={modalData["color"]} sourceData={modalData} change_cancel={setIsDeleteModal} />} />
            }
        </>
    )
}
export default HomePage_SystemSettingsPage_ReviewWorkOrderPage